<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 折叠面板</title>
    <link rel="stylesheet" href="../css/bootstrap.css"/>
    <script src="http://172.17.149.196:8080/jquery/jquery-2.1.3.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>

<div class="list-group" id="accordion">

    <div class="list-group-item">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
            点击我进行展开，再次点击我进行折叠。第 1 部分
        </a>

        <div id="collapseOne" class="collapse">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson
            cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
            vice lomo.
        </div>

    </div>

    <div class="list-group-item">
        <a data-toggle="collapse"  href="#collapseTwo">
            点击我进行展开，再次点击我进行折叠。第 2 部分
        </a>

        <div id="collapseTwo" class="collapse">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson
            cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
            vice lomo.
        </div>

    </div>

    <div class="list-group-item">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
            点击我进行展开，再次点击我进行折叠。第 3 部分
        </a>
        <div id="collapseThree" class="collapse">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson
            cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
            vice lomo.
        </div>
    </div>

</div>

</body>
</html>			